import {Component, Input, OnInit} from '@angular/core';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile.js';
import {CartoDB, OSM} from 'ol/source.js';
import {UtilComponent} from '../../interface/util-component.interface';

@Component({
    selector: 'kylin-city-screen',
    templateUrl: './city-screen.component.html',
    styleUrls: ['./city-screen.component.css']
})
export class CityScreenComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;
    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //
    mapConfig: any;
    selectedValue = 0;
    cartodbList: any = [];
    cartoDBSource;
    tileLater;
    cartLayer;
    constructor() {
    }

    ngOnInit() {
        this.getcartodbList();
        this.initData();
        this.cartoDBSource = new CartoDB({
            account: 'documentation',
            config: this.mapConfig
        });
        this.cartLayer = new TileLayer({
            source: this.cartoDBSource
        });
        this.tileLater = new TileLayer({
            source: new OSM()
        });
        this.map.addLayer(this.tileLater);
        this.map.addLayer(this.cartLayer);
    }

    initData() {
        this.mapConfig = {
            'layers': [{
                'type': 'cartodb',
                'options': {
                    'cartocss_version': '2.3.0',
                    'cartocss': '#layer { polygon-fill: #F00; }',
                    'sql': 'select * from european_countries_e where area > 0'
                }
            }]
        };
    }

    provinceChange(e) {
        this.setArea(+e)
    }

    setArea(n) {
        this.mapConfig.layers[0].options.sql =
            'select * from european_countries_e where area > ' + n;
        this.cartoDBSource.setConfig(this.mapConfig);
    }

    getcartodbList() {
        this.cartodbList = [
            {
                value: 0,
                label: '0 ㎢'
            },
            {
                value: 5000,
                label: '5000 ㎢'
            },
            {
                value: 10000,
                label: '10000 ㎢'
            },
            {
                value: 50000,
                label: '50000 ㎢'
            },
            {
                value: 100000,
                label: '100000 ㎢'
            },
        ]
    }
    cancel(options?: any): any {
        this.map.removeLayer(this.tileLater);
        this.map.removeLayer(this.cartLayer);
    }


}
